<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="teacher">备课表<i class="el-icon-arrow-right"></i></span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card">
			<div class="topMsg">
				<span class="title">{{semester}}</span>
				<div class="allGrade" v-model ="classOption">
					<span v-for="item in classOption" :id="item.value" @click="selectGrade(item.value)">{{item.label}}</span>
				</div>
			</div>
			<div class="timetable">
				<h1  align="center" class="h">
					<img class="left" src="../../assets/image/left.png" alt="" @click ="up"/>
					<b><em></em></b><span>&nbsp;&nbsp;&nbsp;第{{weeks}}周({{startEnd}})</span>
					<img class="right" src="../../assets/image/right.png" alt="" @click ="down"/>
				</h1>
				<table style="color:#666" width="90%" height="395" border="1" cellpadding="3" cellspacing="0" >
					<tr>
						<td width="76"></td>
						<td width="56" height="50"> </td>
						<td width="100" class="week">星期一</td>
						<td width="100" class="week">星期二</td>
						<td width="100" class="week">星期三</td>
						<td width="100" class="week">星期四</td>
						<td width="100" class="week">星期五</td>
					</tr>
					<tr>
					<td rowspan="4" class="week">上午</td>
					 <!-- @click="getcourseid(5+''+7)" -->
					<td>1</td>
						<td rowspan="1" id="11" @click="getcourseid(11)"></td>
						<td rowspan="1" id="21" @click="getcourseid(21)"></td>
						<td rowspan="1" id="31" @click="getcourseid(31)"></td>
						<td rowspan="1" id="41" @click="getcourseid(41)"></td>
						<td rowspan="1" id="51" @click="getcourseid(51)"></td>
					</tr>
					<tr>
					<td>2</td>
						<td rowspan="1" id="12" @click="getcourseid(12)"></td>
						<td rowspan="1" id="22" @click="getcourseid(22)"></td>
						<td rowspan="1" id="32" @click="getcourseid(32)"></td>
						<td rowspan="1" id="42" @click="getcourseid(42)"></td>
						<td rowspan="1" id="52" @click="getcourseid(52)"></td>
					</tr>
					<tr>
					<td>3</td>
						<td rowspan="1" id="13" @click="getcourseid(13)"></td>
						<td rowspan="1" id="23" @click="getcourseid(23)"></td>
						<td rowspan="1" id="33" @click="getcourseid(33)"></td>
						<td rowspan="1" id="43" @click="getcourseid(43)"></td>
						<td rowspan="1" id="53" @click="getcourseid(53)"></td>
					</tr>
					<tr>
					<td>4</td>
						<td rowspan="1" id="14" @click="getcourseid(14)"></td>
						<td rowspan="1" id="24" @click="getcourseid(24)"></td>
						<td rowspan="1" id="34" @click="getcourseid(34)"></td>
						<td rowspan="1" id="44" @click="getcourseid(44)"></td>
						<td rowspan="1" id="54" @click="getcourseid(54)"></td>
					</tr>
					<tr>
					<td rowspan="3" class="week">下午</td>
					<td>5</td>
						<td rowspan="1" id="15" @click="getcourseid(15)"></td>
						<td rowspan="1" id="25" @click="getcourseid(25)"></td>
						<td rowspan="1" id="35" @click="getcourseid(35)"></td>
						<td rowspan="1" id="45" @click="getcourseid(45)"></td>
						<td rowspan="1" id="55" @click="getcourseid(55)"></td>
					</tr>
					<tr>
					<td>6</td>
						<td rowspan="1" id="16" @click="getcourseid(16)"></td>
						<td rowspan="1" id="26" @click="getcourseid(26)"></td>
						<td rowspan="1" id="36" @click="getcourseid(36)"></td>
						<td rowspan="1" id="46" @click="getcourseid(46)"></td>
						<td rowspan="1" id="56" @click="getcourseid(56)"></td>
					</tr>
					<tr>
					<td>7</td>
						<td rowspan="1" id="17" @click="getcourseid(17)"></td>
						<td rowspan="1" id="27" @click="getcourseid(27)"></td>
						<td rowspan="1" id="37" @click="getcourseid(37)"></td>
						<td rowspan="1" id="47" @click="getcourseid(47)"></td>
						<td rowspan="1" id="57" @click="getcourseid(57)"></td>
					</tr>
				</table>
			</div>
			<!-- 备课面板 -->
			<el-dialog title="备课" :visible.sync="showTable" class="addTable">
			  <el-form label-width="100px" label-position="right">
			    <el-form-item label="班级:" style="margin-bottom: 0;">
					<span class="gradeTitle">{{gradeClass}}</span>
			    </el-form-item>
				<el-form-item label="时间:" style="margin-bottom: 0;">
					<span class="time">第{{weeks}}周 {{week}} 第{{mark}}节 </span>
				</el-form-item>
			    <el-form-item label="教学计划:" style="margin-bottom: 0;">
			      <span class="sport"  v-for="item in sportProject" :id="'a'+item.id" @click="getSport(a+item.id)">{{item.title}}</span>
			    </el-form-item>
			    <el-form-item label="单元计划:" style="margin-bottom: 0;">
			      <span class="sport" v-for = "item in sportProject2" :id = "item.plan_id*10" @click="getPlan(item.plan_id)">{{item.motion}}</span>

			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="goContent(nowPlanId)">编辑教案 ></el-button>
			  </div>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				a:'a',
				b:'b',
				options:[],
				classOption:[],//下拉框年级内容
				value:'',//年级id
				month:'',
				semester:'',
				showTable:false,//备课面板
				courseInfo:[],//首页信息
				school_year_id:'',//学年id
				weeks:'',
				gradeClass:'',//每个单元格班级
				week:'',//星期几
				mark:'',//第几节课
				semesterNum:'',//上下学期
				sportProject:[],//教材运动项目
				sportid:[],//所有教材运动项目id
				teacher_params_id:'',//教学计划id
				sportProject2:[],//单元计划运动项目
				planid:[],//对应单元计划的所有id
				nowPlanId:'',//当前点击的单元计划id
				gradeId:'',//年级id
				obj:{},
				allGradeId:'',//所有年级id
				startEnd:'',//第几周开始到结束的时间
				weeksCount:'',//总周数
			}
		},
		methods:{
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
			//获取当前月份
			formatDate(){
				var data = new Date();
				var Month = data.getMonth();
				this.month = Month
			},
			//点击年级变色
			selectGrade(id) {
				if(!this.value) {
					$('#'+id).css({"background":"#00B02D"})
					$('#'+id).css({"color":"#fff"})
					this.value = id
				}else if(id == this.value) {
					$('#'+id).css({"background":"#ccc"})
					$('#'+id).css({"color":"#666"})
					this.value = ''
				}else if(id != this.value) {
					$('#'+id).css({"background":"#00B02D"})
					$('#'+id).css({"color":"#fff"})
					$('#'+this.value).css({"background":"#ccc"})
					$('#'+this.value).css({"color":"#666"})
					this.value = id
				}
				this.$http.post('/api/course_plan/getTeacherCourseInfo',{
					grade_id:id,
					week:this.weeks,
				}).then(res=>{
					this.courseInfo = res.data.data
					var arr=['11','12','13','14','15','16','17','21','22','23','24','25','26','27','31','32','33','34','35','36','37',
						'41','42','43','44','45','46','47','51','52','53','54','55','56','57']
					for(var i=0; i<arr.length;i++){
						$('#'+arr[i]).html('')
						$('#'+arr[i]).attr('c_id','')
						$('#'+arr[i]).css("background","#fff")
					}
					if(this.courseInfo.length == 0){
						return
					}else {
						for(var i = 0; i<this.courseInfo.length; i++){
							this.weekMark = this.courseInfo[i].week+this.courseInfo[i].mark
							if($.inArray(this.weekMark,arr)>-1){
								var cId = $('#'+this.weekMark).attr('c_id')
								if(cId.length == 0 ){
									$('#'+this.weekMark).attr('c_id',this.courseInfo[i].id)
								}
								if(this.courseInfo[i].get_course_plan.course_name == undefined) {
									$('#'+this.weekMark).append((this.courseInfo[i].get_grade.grade_title+this.courseInfo[i].get_class.class_name)+"<br/>"+"<a href='javascript:;' style='color:#666'>"+'点击备课'+"</a>"+"<br/>")
								}else {
									$('#'+this.weekMark).append(this.courseInfo[i].get_grade.grade_title+this.courseInfo[i].get_class.class_name+"<br/>"+"<a href='javascript:;' style='color:#fff'>"+this.courseInfo[i].get_course_plan.course_name+"</a>"+"</br>")
								}

								if($('#'+this.weekMark).html()){
									$('#'+this.weekMark).css("background","orange")
								}
								localStorage.setItem(this.weekMark,this.courseInfo[i].id)

							}
						}
					}
				})
				this.getTeacherCourseInfo()
			},
			//获取教师课程信息
			async getTeacherCourseInfo(){
				await this.$http.post('/api/course_plan/getTeacherCourseInfo',{
					grade_id:this.value,
					week:this.weeks,
				}).then(res=>{
						this.courseInfo = res.data.data
						this.weeks =res.data.week
						this.startEnd = res.data.weeks_time.start+'-'+res.data.weeks_time.end
						localStorage.setItem('startEnd',this.startEnd)
						var arr=['11','12','13','14','15','16','17','21','22','23','24','25','26','27','31','32','33','34','35','36','37',
								'41','42','43','44','45','46','47','51','52','53','54','55','56','57']
						for(var i=0; i<arr.length;i++){
							$('#'+arr[i]).html('')
						}
						if(this.courseInfo.length == 0){
							return
						}else {
							for(var i = 0; i<this.courseInfo.length; i++){
								this.weekMark = this.courseInfo[i].week+this.courseInfo[i].mark
								if($.inArray(this.weekMark,arr)>-1){
									if(this.courseInfo[i].get_course_plan.course_name == undefined) {
										$('#'+this.weekMark).append(this.courseInfo[i].get_grade.grade_title+this.courseInfo[i].get_class.class_name+"<br/>"+"<a href='javascript:;' style='color:#666'>"+'点击备课'+"</a>"+"<br/>")
									}else {
										$('#'+this.weekMark).append(this.courseInfo[i].get_grade.grade_title+this.courseInfo[i].get_class.class_name+"<br/>"+"<a href='javascript:;' style='color:#fff'>"+this.courseInfo[i].get_course_plan.course_name+"</a>"+"<br/>")
									}
									if($('#'+this.weekMark).html()){
										$('#'+this.weekMark).css("background","orange")
									}
									localStorage.setItem(this.weekMark,this.courseInfo[i].id)

								}
							}
						}

					})
			},
			//获取年级学年以及哪年哪学期
			getSchoolYearGradeInfo(){
				this.$http.post('/api/course_plan/getTeacherClassInfo')
					.then(res=>{
						this.school_year_id = res.data.school_year.id
						//获取学年
						localStorage.setItem('school_year_id',this.school_year_id)
						var classOption =[]
						res.data.class_info.map(item=>{
							var obj ={}
							obj.label = item.get_grade.grade_title
							obj.value = item.get_grade.id
							classOption.push(obj)
							//去除数组中重复的对象
							//reduce() 数组中的每个值（从左到右）开始合并，最终为一个值
							//reduceRight()从数组的末尾向前将数组中的数据项累加
							const newArr = classOption.reduce((item, next) => {
								obj[next.value] ? '' :obj[next.value] = item.push(next) && true;
								return item
							}, []);
							this.classOption = newArr
						})
						if(res.data.school_year.semester == 2){
							this.semester =res.data.school_year.year+' 下学期 '+'('+ res.data.school_year.start+'-'+res.data.school_year.end+')'
							//获取哪年哪学期
							localStorage.setItem('semester',res.data.school_year.year+' 下学期 ')
							this.semesterNum = 2
							//获取上下学期
							localStorage.setItem('semesterNum',this.semesterNum)
						}else {
							this.semester =res.data.school_year.year+' 上学期 '+'('+ res.data.school_year.start+'-'+res.data.school_year.end+')'
							//获取哪年哪学期
							localStorage.setItem('semester',res.data.school_year.year+' 上学期 ')
							this.semesterNum = 1
							//获取上下学期
							localStorage.setItem('semesterNum',this.semesterNum)
						}
						var startData = new Date(res.data.school_year.start)
						var endData = new Date(res.data.school_year.end)
						this.weeksCount = Math.ceil((endData.getTime()-startData.getTime())/(1000 * 60 * 60 * 24*7))

					})
			},

			//上一周
			up(val){
				if(this.weeks >1) {
					this.weeks--
					this.getSchoolYearGradeInfo()
					this.getTeacherCourseInfo()
				}
			},
			//下一周
			down(val){
				if(this.weeks<this.weeksCount){
					this.weeks++;
					this.getSchoolYearGradeInfo()
					this.getTeacherCourseInfo()
				}
			},

			//备课
			async getcourseid(id){
				//未选年级提示
				if(this.value == '') {
					this.$alert('请选择年级', '提示', {
					  confirmButtonText: '确定',
					});
					return
				}
				if($('#'+id).attr('c_id') != undefined && $('#'+id).html() != '' ) {
					this.showTable = true
				}
				//获取当前的年级班级
				await this.$http.post('/api/course_plan/getId',{
					id:$('#'+id).attr('c_id')
				}).then(res=>{
					this.gradeClass = res.data.data.get_grade.grade_title+res.data.data.get_class.class_name
					//获取几年级几班
					localStorage.setItem('gradeClass',this.gradeClass)
					this.gradeId= res.data.data.grade_id
					this.mark = res.data.data.mark
					if(res.data.data.weeks == '1'){
						this.week = '星期一'
					}else if (res.data.data.weeks == '2') {
						this.week = '星期二'
					}else if (res.data.data.weeks == '3') {
						this.week = '星期三'
					}else if (res.data.data.weeks == '4') {
						this.week = '星期四'
					}else if (res.data.data.weeks == '5') {
						this.week = '星期五'
					}
					//获取课程id
					localStorage.setItem('course_id',res.data.data.id)
					//获取第几周
					localStorage.setItem('weeks',this.weeks)
					//获取星期几
					localStorage.setItem('week',res.data.data.weeks)
					//获取第几节课
					localStorage.setItem('mark',res.data.data.mark)
					//获取年级id
					localStorage.setItem('gradeId',res.data.data.grade_id)
					//获取班级id
					localStorage.setItem('grade_class_id',res.data.data.class_id)
				})

				//获取教材项目
				this.$http.post('/api/course_plan/getTeacherProgramInfo',{
					grade_id:this.value,
					school_year_id:this.school_year_id,
					semester:this.semesterNum,
				}).then(res=>{
					if(res.data.errorCode == 400){
						this.$message({
							type:'error',
							message:res.data.msg
						})
						return
					}
					this.sportProject = res.data.data
					var sportId =[]
					this.sportProject.map(item=>{
						sportId.push(this.a+item.id)
					})
					this.sportid = sportId
					this.teacher_params_id = res.data.teacher_params_id
					//获取教学计划id
					localStorage.setItem('teacher_params_id',res.data.teacher_params_id)
				})
			},
			getSport(id){
				var Id = id.substring(1,3)
				//获取教案类别id
				localStorage.setItem('plan_type_id',Id)
				if($.inArray(id,this.sportid) > -1){
          for(var i=0; i<this.sportid.length;i++){
            $('#'+this.sportid[i]).css({"background":"#ccc"})
            $('#'+this.sportid[i]).css({"color":"#666"})
          }
          $('#'+id).css({"background":"#00B02D"})
          $('#'+id).css({"color":"#fff"})
					}
				this.$http.post('/api/course_plan/getTeacherPlanInfo',{
					teacher_program_id:this.teacher_params_id,
					plan_type_id:Id
				}).then(res=>{
					this.sportProject2 = res.data.data
					var planId = []
					this.sportProject2.map(item=>{
						planId.push(item.plan_id*10)
					})
					this.planid = planId
				})
			},
			getPlan(id){
				if($.inArray(id*10,this.planid) > -1){
					for(var i=0; i<this.planid.length;i++){
						$('#'+this.planid[i]).css({"background":"#ccc"})
						$('#'+this.planid[i]).css({"color":"#666"})
					}
					$('#'+id*10).css({"background":"#00B02D"})
					$('#'+id*10).css({"color":"#fff"})
				}
				this.nowPlanId = id
				//获取教案id
				localStorage.setItem('plan_id',this.nowPlanId)
			},
			goContent(id){
				if(!this.teacher_params_id){
					this.$message({
						type:'error',
						message:'请选择教学计划'
					})
				}else if(!this.nowPlanId) {
					this.$message({
						type:'error',
						message:'请选择单元计划'
					})
				}else if (this.teacher_params_id&&this.nowPlanId) {
					this.$router.push({path:'/planContent/'+this.nowPlanId})
				}

			}
		},
		created(){
			this.getSchoolYearGradeInfo()
			this.getTeacherCourseInfo()
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addteacher {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 180px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card {
		margin: 30px 50px;
		.topMsg {
			text-align: center;
			position:relative;
			padding-top:20px;
			/deep/.el-input__inner {
				background: #00B02D;
				color: #fff;
			}
			/deep/.el-select .el-input .el-select__caret {
					color: #fff;
				}
			.title {
				color: #00B02D;
				font-size: 18px;
				font-weight: 700;
				height: 25px;
				position: relative;
				top: 4px;
			}
			.allGrade {
				span {
					display: inline-block;
					margin-top: 10px;
					padding:0 15px;
					height: 30px;
					background: #ccc;
					margin-right: 20px;
					border-radius: 5px;
					line-height: 30px;
					cursor: pointer;
				}
			}
			.title2 {
				&:hover {
					.oldTimetable {
							display: block;
						}
					}
				.oldTimetable {
					width: 200px;
					background: #fff;
					border: 1px solid #ccc;
					z-index:2;
					position: absolute;
					top: 43px;
					right: 0;
					display: none;
					div {
						height: 40px;
						line-height: 40px;
						border-bottom: 1px solid #ccc;
						&:hover {
							cursor: pointer;
							background: #ccc;
						}

					}
				}
				.postTimetable {
					font-size: 14px;
					position: absolute;
					width: 100px;
					top: 25px;
					right: 10px;
					text-decoration: underline;
					cursor: pointer;
					&:hover {
						.oldTimetable {
							display: block;
						}

					}
				}
			}
		}
		.timetable {
			background: #fff;
			width: 100%;
			margin-top:1%;
	    	position: relative;
	    	h1 {
				height: 60px;
				line-height: 60px;
				position: relative;
				.left {
					position: absolute;
					top: 15px;
					left: 60px;
				}
				.right {
					position: absolute;
					top: 15px;
					right: 68px;
				}
			}
			table {
				margin-left: 60px;
				text-align: center;
				margin-bottom: 20px;
				border: 1px solid #bbb;
				.week {
					color: #232222;
					font-weight: 700;
				}
				td {
					font-size: 14px;
					padding: 5px 0;
					border: 1px solid #bbb;
					cursor: pointer;
					.obj {
						font-size: 8px;
						color: #00B02D;
					}
					&:hover {
						background: #eee;
					}
				}
			}
		}
	}
	.addTable {
		.gradeTitle {
			color: #00b02d;
		}
		.time {
			color: #000;
		}
		.sport {
			display: inline-block;
			height: 25px;
			line-height: 25px;
			background: #ccc;
			padding: 0 10px;
			margin-right: 10px;
			cursor: pointer;
		}
	}
</style>
